<template>
	<x-popup position="bottom" :show="showUpgrade" :closeIcon="false" @update:show="closeUpgrade">
		<view class="pay-main">
			<view class="pay-main-title">
				请选择支付方式
			</view>
			<view class="orderPay-cell single" @click="onSelect('wx')" data-type="wechat">
				<view class="orderPay-cell-cover">
					<image class="orderPay-cell-image"
						src="https://oss.jtmckj.com/wmp/images/home/orderPay/i_icon_wechat.png"></image>
				</view>
				<view class="orderPay-cell-info">
					<view class="orderPay-cell-title">微信支付</view>
				</view>
				<view class="orderPay-cell-panel">
					<image class="orderPay-cell-radio" :src="wechatPay ? iconData.radioed : iconData.radio"></image>
				</view>
			</view>
			<view class="orderPay-cell single spe" v-if="payto != 'orderSong' && payto != 'gift'" @click="onSelect('ali')" data-type="wechat">
				<view class="orderPay-cell-cover">
					<image class="orderPay-cell-image"
						src="https://oss.jtmckj.com/wmp/qnjg/order/i_icon_ali.png"></image>
				</view>
				<view class="orderPay-cell-info">
					<view class="orderPay-cell-title">支付宝支付</view>
				</view>
				<view class="orderPay-cell-panel">
					<image class="orderPay-cell-radio" :src="aliPay ? iconData.radioed : iconData.radio"></image>
				</view>
			</view>
			<view class="pay-main-btn">
				<view class="btn-cancle" @click="cancle">
					取消
				</view>
				<view class="btn-comfirm" @click="confirm">
					确认
				</view>
			</view>
		</view>
		<x-popup class="uv-content" position="center" :show="showAliPay">
			<view class="uv-content-mask">
				<view class="mask-title">
					支付确认
				</view>
				<view class="mask-list">
					1、请点击"去支付",进入支付宝完成支付。
				</view>
				<view class="mask-list">
					2、如果您已支付或放弃支付，请点击"返回商家"。
				</view>
			</view>
			<uv-parse :content="aliContent"></uv-parse>
			<view class="mask-btn" :class="payto == 'store' ? 'store' :''">
				<view class="mask-cancle" @click.stop="payReturn">
					取消支付
				</view>
			</view>
		</x-popup>
	</x-popup>
</template>

<script setup>
	import {
		ref,
		defineProps,
		defineEmits,
		toRef
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		HFiveMemberAppObjProcess
	} from '@/api/public.js'
	import wx from "weixin-js-sdk";
	const themeInfo = ref(uni.getStorageSync('themeInfo')?.type)
	
	const iconData = {
      fold: "https://oss.jtmckj.com/wmp/kbq/common/i_radio_bottom.png",
      unfold: "https://oss.jtmckj.com/wmp/kbq/common/i_radio_top.png",
      checked: "https://oss.jtmckj.com/wmp/kbq/common/i_square_choose.png",
      check: "https://oss.jtmckj.com/wmp/images/common/i_checkbox_check.png",
      radioed: "https://oss.jtmckj.com/wmp/kbq/common/i_radio_choose.png",
      radio: "https://oss.jtmckj.com/wmp/images/common/i_radio_check.png",
      vipRadio: "https://oss.jtmckj.com/wmp/qnjg/pay/i_yh_radio.png",
      coupon:"https://oss.jtmckj.com/wmp/images/common/i_checkbox_check.png",
      couponed:"https://oss.jtmckj.com/wmp/kbq/common/i_square_choose.png"
    }
	const wechatPay = ref(true)
	const aliPay = ref(false)
	
	const showAliPay = ref(false) // 支付宝支付弹窗显示
	const aliContent = ref('') // 支付宝支付渲染内容
	
	// 定义 props
	const props = defineProps({
		showUpgrade: {
			type: Boolean,
			default: false
		},
		payto:{
			type: String,
			default: ''
		},
		info:{
			type: Object,
			default: {}
		},
		secondInfo:{
			type: Object,
			default: {}
		}
	});
	const payto = toRef(props.payto)
	const info = toRef(props.info)
	const secondInfo = toRef(props.secondInfo)
	
	const userInfo = uni.getStorageSync('cardInfo')
	const shopInfo = uni.getStorageSync('shopInfo') || {};
	// 定义 emits
	const emit = defineEmits(['update:show','finishPay']);
	// const { showUpgrade  } = toRefs(props);
	// 关闭弹窗时触发的事件
	const closeUpgrade = (event) => {
		console.log(event);
		// emit('update:show', false);
	};
	const onSelect = (e)=>{
		console.log(info.value);
		if(e == 'wx'){
			wechatPay.value = true
			aliPay.value = false
		}else if(e == 'ali'){
			aliPay.value = true
			wechatPay.value = false
		}
	}
	const cancle = ()=>{
		emit('update:show', false);
	}
	const payReturn = ()=>{
		showAliPay.value = false
		emit('update:show', false);
	}
	// ------------------------------------------------------ 确认 ----------------------------------------------------------------
	const confirmFlag = ref(false)
	const confirm = async()=>{
		uni.showLoading({ title: '唤起支付中，请稍等', mask: true });
		console.log(payto.value);
		if(confirmFlag.value){
			uni.showToast({
			  title: '加载中，请稍等，或重新进入此页面',
			  icon: "none",
			});
			return
		}
		confirmFlag.value = true
		switch (payto.value) {
			case 'store': // 储值
				await payStore()
				break;
		
			case 'up': // 会员卡升级
				await payUp()
				break;
				
			case 'orderSong': // 点歌
				await paySong()
				break;
				
			case 'gift': // 打赏
				await payGift()
				break;
			case 'comSharing': // 合伙人升级
				await paycomSharing()
				break;
				
		}
		
		// emit('confirmPay',payType);
	}
	
	// ------------------------------------------------------ 支付 ---------------------------------------------------------------------

	// 会员储值
	const payStore = async(opt) => {
		info.value.openUnionPay = shopInfo.isOpenUnionPay ? '1' : '0' // 1开启银联支付  0 正常支付
		if(aliPay.value){  // 支付宝支付
			
			const paymentRes = await HFiveMemberAppObjProcess({functionName: "AliMenberRechargeH5",contentData:info.value})
			if(shopInfo.isOpenUnionPay){ // 如果是银联支付
				
				uni.hideLoading()
				aliContent.value = paymentRes.data
				confirmFlag.value = false
				showAliPay.value = true
			}else{ // 不是银联支付
				console.log(paymentRes);
				uni.hideLoading()
				uni.navigateTo({
					url: '/pagesOrder/view/pay/alipay?paymentRes=' + paymentRes.data
				})
				confirmFlag.value = false
			}
			
			
		}else if(wechatPay.value){ // 微信支付
			// 发起支付请求
			HFiveMemberAppObjProcess({functionName: "MenberRechargeH5",contentData:info.value})
			.then(paymentRes=>{
				confirmFlag.value = false
				console.log(paymentRes);
				wxPaySDK(paymentRes)
				uni.setStorageSync('wxlink','store')
			})
			.catch(err=>{
				confirmFlag.value = false
			})
		
		}
		
	}
	
	
	// 会员升级
	const payUp = async()=>{
		console.log(info.value);
		info.value.openUnionPay = shopInfo.isOpenUnionPay ? '1' : '0' // 1开启银联支付  0 正常支付
		// return
		if(aliPay.value){  // 支付宝支付
			const paymentRes = await HFiveMemberAppObjProcess({functionName: 'AliPayMemberUp_H5',contentData: info.value})
			if(shopInfo.isOpenUnionPay){ // 如果是银联支付
			
				uni.hideLoading()
				aliContent.value = paymentRes.data
				confirmFlag.value = false
				showAliPay.value = true
			}else{ // 不是银联支付
				console.log(paymentRes);
				uni.hideLoading()
				uni.navigateTo({
					url: '/pagesOrder/view/pay/alipay?paymentRes=' + paymentRes.data
				})
				confirmFlag.value = false
			}
			
			
		}else if(wechatPay.value){ // 微信支付
			// 发起支付请求
			HFiveMemberAppObjProcess({functionName: "PayMemberUp_H5",contentData:info.value})
			.then(paymentRes=>{
				confirmFlag.value = false
				console.log(paymentRes);
				wxPaySDK(paymentRes)
				uni.setStorageSync('wxlink','memberUp')
			})
			.catch(err=>{
				confirmFlag.value = false
			})
			
		}
	}
	
	// 点歌
	const paySong = async()=>{
		console.log(info.value);
		info.value.openUnionPay = shopInfo.isOpenUnionPay ? '1' : '0' // 1开启银联支付  0 正常支付
		// return
		if(aliPay.value){  // 支付宝支付
			// const paymentRes = await HFiveMemberAppObjProcess({functionName: 'AliPayMemberUp_H5',contentData: info.value})
			// if(shopInfo.isOpenUnionPay){ // 如果是银联支付
			
			// 	uni.hideLoading()
			// 	aliContent.value = paymentRes.data
			// 	confirmFlag.value = false
			// 	showAliPay.value = true
			// }else{ // 不是银联支付
			// 	console.log(paymentRes);
			// 	uni.hideLoading()
			// 	uni.navigateTo({
			// 		url: '/pagesOrder/view/pay/alipay?paymentRes=' + paymentRes.data
			// 	})
			// 	confirmFlag.value = false
			// }
			
			
		}else if(wechatPay.value){ // 微信支付
			// 发起支付请求
			HFiveMemberAppObjProcess({functionName: "PayPerSongform_H5",contentData:info.value})
			.then(paymentRes=>{
				confirmFlag.value = false
				console.log(paymentRes);
				secondInfo.value.tradeNo = paymentRes.tradeNo
				HFiveMemberAppObjProcess({functionName: "TemporaryPerSongPay_H5",contentData:secondInfo.value})
				wxPaySDK(paymentRes)
				
				
				// uni.setStorageSync('wxlink','memberUp')
			})
			.catch(err=>{
				confirmFlag.value = false
			})
			
		}
	}
	
	// 打赏
	const payGift = async()=>{
		console.log(info.value);
		info.value.openUnionPay = shopInfo.isOpenUnionPay ? '1' : '0' // 1开启银联支付  0 正常支付
		// return
		if(aliPay.value){  // 支付宝支付
			// const paymentRes = await HFiveMemberAppObjProcess({functionName: 'AliPayMemberUp_H5',contentData: info.value})
			// if(shopInfo.isOpenUnionPay){ // 如果是银联支付
			
			// 	uni.hideLoading()
			// 	aliContent.value = paymentRes.data
			// 	confirmFlag.value = false
			// 	showAliPay.value = true
			// }else{ // 不是银联支付
			// 	console.log(paymentRes);
			// 	uni.hideLoading()
			// 	uni.navigateTo({
			// 		url: '/pagesOrder/view/pay/alipay?paymentRes=' + paymentRes.data
			// 	})
			// 	confirmFlag.value = false
			// }
			
			
		}else if(wechatPay.value){ // 微信支付
			// 发起支付请求
			HFiveMemberAppObjProcess({functionName: "PayPerform_H5",contentData:info.value})
			.then(paymentRes=>{
				confirmFlag.value = false
				console.log(paymentRes);
				secondInfo.value.tradeNo = paymentRes.tradeNo
				secondInfo.value.memberCardCode = info.value.memberCardCode
				HFiveMemberAppObjProcess({functionName: "TemporaryPerPay_H5",contentData:secondInfo.value})
				wxPaySDK(paymentRes)
				
				
				// uni.setStorageSync('wxlink','memberUp')
			})
			.catch(err=>{
				confirmFlag.value = false
			})
			
		}
	}
	
	// 合伙人升级
	const paycomSharing = async()=>{
		console.log(info.value);
		info.value.openUnionPay = shopInfo.isOpenUnionPay ? '1' : '0' // 1开启银联支付  0 正常支付
		// return
		if(aliPay.value){  // 支付宝支付
			const paymentRes = await HFiveMemberAppObjProcess({functionName: 'AliPayMemberUpComSharing_H5',contentData: info.value})
			if(shopInfo.isOpenUnionPay){ // 如果是银联支付
			
				uni.hideLoading()
				aliContent.value = paymentRes.data
				confirmFlag.value = false
				showAliPay.value = true
			}else{ // 不是银联支付
				console.log(paymentRes);
				uni.hideLoading()
				uni.navigateTo({
					url: '/pagesOrder/view/pay/alipay?paymentRes=' + paymentRes.data
				})
				confirmFlag.value = false
			}
			
			
		}else if(wechatPay.value){ // 微信支付
			// 发起支付请求
			HFiveMemberAppObjProcess({functionName: "PayMemberUpComSharing_H5",contentData:info.value})
			.then(paymentRes=>{
				confirmFlag.value = false
				console.log(paymentRes);
				wxPaySDK(paymentRes)
				uni.setStorageSync('wxlink','upComSharing')
			})
			.catch(err=>{
				confirmFlag.value = false
			})
			
		}
	}
	
	
	// 微信支付(SDK)
	const wxPaySDK = (opt,resultOrder) => {
		wx.config({
			debug: false, // 这里一般在测试阶段先用ture，等打包给后台的时候就改回false,
			appId: opt.appId, // 必填，公众号的唯一标识
			timestamp: opt.timeStamp, // 必填，生成签名的时间戳
			nonceStr: opt.nonceStr, // 必填，生成签名的随机串
			signature: opt.paySign, // 必填，签名
			jsApiList: ["chooseWXPay"] // 必填，需要使用的JS接口列表 
		});
		wx.ready(() => {
			wx.chooseWXPay({
				appId: opt.appId, // 必填，公众号的唯一标识
				timestamp: opt.timeStamp, // 必填，生成签名的时间戳
				nonceStr: opt.nonceStr, // 必填，生成签名的随机串
				package: opt.package, // 统一支付接口返回的prepay_id参数值，提交格式如:prepay_id=|*|*|*)
				signType: opt.signType, // 签名方式，根据后端返回就行，一般默认为'SHA1'，使用新版支付需传入'MD5'
				paySign: opt.paySign, // 必填，支付签名
				success: function(payRes) {
					uni.hideLoading()
					// 支付成功后的回调函数
					// console.log('11', payRes)
					emit('update:show', false);
					emit('finishPay', true);
					uni.showToast({ title: '支付成功', icon: 'none' })
					confirmFlag.value = false
					// uni.reLaunch({
					// 	url: '/pages/home/index'
					// })
				},
				cancel: function(payRes) {
					uni.hideLoading()
					confirmFlag.value = false
					// that.$message.error('取消支付')
					// console.log('2222', payRes,opt,resultOrder)
					// wxPayCancel(payRes)
				},
				fail: function(payRes) {
					uni.hideLoading()
					confirmFlag.value = false
					// that.$message.error('支付失败')
					// console.log('3333', payRes,opt,resultOrder)
					// wxPayFail(payRes)
				}
			});
		});
	}

</script>

<style scoped lang="less">
	
	.pay-main {
		background-color: #fff;
		border-radius: 24rpx 24rpx 0 0;
		// width: 100%;
		// padding: 40rpx 60rpx 20rpx;
		// height: 300rpx;
		.pay-main-title{
			text-align: center;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 36rpx;
			color: var(--maincolorf1);
			line-height: 36rpx;
			padding: 20rpx 0;
		}
		.pay-main-btn{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 60rpx;
			.btn-cancle{
				width: 240rpx;
				height: 80rpx;
				border-radius: 40rpx;
				border: 2rpx solid var(--maincolorbd5);
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 36rpx;
				color: var(--maincolorf2);
				line-height: 80rpx;
				text-align: center;
			}
			.btn-comfirm{ 
				border: 2rpx solid var(--dt-backcolorPink);
				width: 240rpx;
				height: 80rpx;
				background: var(--dt-backcolorPink);
				border-radius: 40rpx;
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 36rpx;
				color: var(--maincolor);
				line-height: 80rpx;
				text-align: center;
			}
		}
		.orderPay-cell {
				border-bottom: 1px solid var(--maincolorbd);
				display: flex;
				justify-content: space-between;
				align-items: cneter;
				&.spe{
					border: none;
				}
				&.single {
					padding: 29rpx 20rpx;
					.orderPay-cell-info {
						display: flex;
						align-items: center;
					}
				}
				&.multi {
					padding: 40rpx 0;
				}
				&.total {
					justify-content: flex-end;
					padding: 39rpx 0 51rpx 0;
				}
				&-cover {
					display: flex;
						align-items: center;
				}
				&-image {
					display: block;
					width: 60rpx;
					height: 60rpx;
				}
				&-info {
					padding-left: 28rpx;
					flex: 1;
					// display: flex;
					// align-items: center;
				}
				&-title {
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 32rpx;
					color: var(--maincolorf1);
					line-height: 32rpx;
				}
				&-subtitle {
					padding-top: 27rpx;
					display: flex;
				}
				&-can {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: var(--maincolorf2);
					line-height: 24rpx;
				}
				&-history {
					padding-left: 40rpx;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: var(--maincolorf2);
					line-height: 24rpx;
		
					.highlight {
						color: #FF3333;
					}
				}
				&-panel {
					display: flex;
					align-items: center;
				}
				&-text {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: var(--maincolorf5);
					line-height: 24rpx;
				}
				&-into {
					display: block;
					width: 12rpx;
					height: 22rpx;
					margin-left: 12rpx;
				}
				&-checkbox {
					width: 32rpx;
					height: 32rpx;
				}
				&-radio {
					width: 32rpx;
					height: 32rpx;
				}
				&-total {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: var(--maincolorf2);
					line-height: 24rpx;
				}
				&-total__rmb {
					color: var(--maincolorf5);
				}
				&-total__num {
					color: var(--maincolorf5);
					font-size: 36rpx;
					line-height: 36rpx;
				}
			}
	}
	.uv-content{
		position: relative;
		.uv-content-mask{
			position: absolute;
			background-color: #ffffff;
			z-index: 999;
			.mask-title{
				background-color: #ffffff;
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 36rpx;
				color: var(--maincolorf1);
				line-height: 36rpx;
				text-align: center;
				padding-bottom: 20rpx;
			}
			.mask-list{
				background-color: #ffffff;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: var(--maincolorf1);
				line-height: 48rpx;
				max-width: 600rpx;
			}
		
		}
		.mask-btn{
			position: absolute;
			background-color: #ffffff;
			display: flex;
			bottom: 0rpx;
			align-items: center;
			justify-content: flex-start;
			width: 50%;
			z-index: 999;
			&.store{
				bottom: 40rpx;
			}
			.mask-cancle{
				width: 200rpx;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 36rpx;
				color: var(--dt-colorPink);
				line-height: 80rpx;
				text-align: center;
				padding-left: 20rpx;
			}
		}
		// .ali-return{
		// 	position: absolute;
		// 	left: 0;
		// 	top: 0;
		// 	height: 100%;
		// 	width: 50%;
		// 	background: transparent;
		// }
		::v-deep{
			.u-popup__content{
				background-color: #ffffff !important;
				padding: 24rpx;
			}
			.pop_tip_p4{
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 36rpx;
				color: var(--maincolorf1);
				line-height: 36rpx;
				text-align: center;
				padding-bottom: 20rpx;
			}
			.pop_tip_p5{
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: var(--maincolorf1);
				line-height: 48rpx;
				max-width: 600rpx;
				// padding: 4rpx 0;
			}
			.pop_tip_p3{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 24rpx;
			}
			.p_btn {
				
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 36rpx;
				color: var(--dt-colorPink);
				line-height: 80rpx;
				text-align: center;
			}
			
		}
	}
</style>